<template>
    <div>
      <!-- 条件查询表单 -->
      <div>
        <el-form :inline="true" :model="outGoods" class="demo-form-inline">
          <!-- 功能按钮 -->
          <el-form-item style="float: left">
            <el-button type="primary" @click="dialogFormVisible = true; dialogFormTitle='出库'">新增出库</el-button>
          </el-form-item>
          <!-- 查询条件 -->
          <el-form-item label="商品名称：">
            <el-input
              v-model="outGoods.oname"
              placeholder="请输入商品名称"
              widht="20px"
            ></el-input>
          </el-form-item>
          <!-- 查询按钮 -->
          <el-form-item >
            <el-button type="primary" icon="el-icon-search" @click="getAlloutGoodsButton">查询</el-button>
            <el-button type="primary" icon="el-icon-refresh" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
  
      <!-- 数据展示 -->
      <div>
        <el-table :data="pageBean.beanList" style="widtindexh: 100%" >
          <el-table-column fixed type="index" label="序号" width="55"> 
          </el-table-column>
          <el-table-column fixed prop="oid" label="编号" width="80"></el-table-column>
          <el-table-column fixed prop="oname" label="出库商品" width="190"></el-table-column>
        
          
          <el-table-column prop="ioemployee" label="出库人" width="140"></el-table-column>
          <el-table-column prop="outNumber" label="出库数量" width="120"></el-table-column>
          <el-table-column prop="productUnit" label="单位" width="120"></el-table-column>
          <el-table-column prop="specs" label="规格" width="120" >
          </el-table-column>
          <el-table-column prop="outTime" label="出库时间" width="120"></el-table-column>
          <el-table-column prop="productType" label="类型" width="150"></el-table-column>
          <el-table-column prop="goodsPlace" label="仓库位置" width="100"></el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" content="打印此次出库单" placement="bottom">
                <el-button type="primary" size="mini" icon="el-icon-s-open" circle
                  @click="handleEdit(scope.$index, scope.row)"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>

      </div>
      <!-- <el-dialog :title="dialogFormTitle" :visible.sync="dialogFormVisible" @close="closeDialog">
        <el-form  :model="addUnloadGoods" label-width="80px">
        <el-form-item label="商品名称">
        <el-select v-model="OutGoods.oname"    clearable  placeholder="请选择">
          <el-option
        v-for="item in goods"
        :key="item.gid"
        :label="item.gname"
        :value="item.gname">
        <span>{{item.gname}}</span>
        <span> 库余：{{item.sum}}</span>
        </el-option>
      </el-select>
      </el-form-item>
        <el-form-item label="出库数">
          <el-input v-model="OutGoods.outNumber"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrder('purOrderAdd')">确 定</el-button>
      </div>
    </el-dialog> -->
  
      <!-- 分页控件 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[1, 3, 5]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageBean.totalRecord">
        </el-pagination>
      </div>
    </div>
  </template>
  
  <script>
  
  export default {
    data() {
      return {
       
        dialogFormTitle:"",
        sample: {},
        pageBean: [],
        pageIndex: 1,
        pageSize: 3,
        outGoods: {},
        dialogFormVisible: false,
        supplierAdd:{},
        goods:[],
        //pages: ""
      };
    },
    mounted() {
      this.getAlloutGoods();
    },
    methods: {
      //条件查询操作
      getAlloutGoodsButton() {
        this.pageIndex = 1;
        this.pageSize = 3;
        this.getAlloutGoods();
      },
  
      //重置按钮
      reset() {
        this.outGoods = {};
        this.getAlloutGoods();
        this.$axios.get("/test/exportPdf").then(resp=>{});
      },
  
      //删除操作
      deleteSupplier(index, row) {
        this.$confirm("此操作将永久删除该供应商, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          //需要修改
        //   this.$axios.post("/"+ row.sid).then((resp) => {
        //     if(true){
        //       this.$axios.post("/supplier/removeBySid/"+ row.sid).then((resp) => {
        //         if (resp.data.code == 200) {
        //           this.$message({
        //           type: "success",
        //           message: "删除成功!",
        //         });
        //           //起到刷新页面的作用
        //           this.getAlloutGoods();
        //         }else{
        //           this.$message("该供应商下存在商品，不能删除");
        //         }
        //       });
        //     }
        //   });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      },
      //编辑供应商信息
      handleEdit(index, row) {
        this.dialogFormVisible = true;
        this.dialogFormTitle = "修改信息";
        //浅拷贝，将row行的数据拷贝到smapleModify中
        this.supplierAdd = { ...row };
      },
  
      //添加供应商
  
      //条件查询订单
      onSubmit() {
        this.pageIndex = 1;
        this.getAlloutGoods();
      },
  
      //查询所有供应商
      getAlloutGoods() {
        this.$axios
          .post(
            "/out/getAll/" + this.pageIndex + "/" + this.pageSize,
            this.outGoods
        
          )
          .then((resp) => {
            if(resp.data.code==200){
              this.pageBean = resp.data.data;
                console.log(this.pageBean);
            }
           
          });
        
      },
  
      //每页显示几条数据
      handleSizeChange(val) {
        this.pageSize = val;
        this.getAlloutGoods();
      },
  
      //显示第几页
      handleCurrentChange(val) {
        this.pageIndex = val;
        this.getAlloutGoods();
      },
    },
  };
  </script>
  
  <style>
  </style>